import React from 'react'

// 导入 TodoItem 类型
import { TodoItem } from '../todos'

// 提供 props 类型
interface Props {
  list: TodoItem[],
  onClearCompletedTodo(): void,
  onSearchAllTodo(active: string): void,
}

type State = {
  active: string
}

class TodoFooter extends React.Component<Props> {
  state: State = {
    active: '#/'
  }

  onFilters = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault()
    this.setState({
      active: e.currentTarget.hash
    })
    this.props.onSearchAllTodo(e.currentTarget.hash)
  }

  render() {
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>{this.props.list && this.props.list.length}</strong> item left
        </span>
        {this.props.list.length !== 0 &&
          (
            <ul className="filters">
              <li>
                <a
                  className={this.state.active === '#/' ? 'selected' : ''}
                  onClick={(e) => this.onFilters(e)}
                  href="#/"
                >
                  All
                </a>
              </li>
              <li>
                <a
                  className={this.state.active === '#/active' ? 'selected' : ''}
                  onClick={(e) => this.onFilters(e)}
                  href="#/active"
                >
                  Active
                </a>
              </li>
              <li>
                <a
                  className={this.state.active === '#/completed' ? 'selected' : ''}
                  onClick={(e) => this.onFilters(e)}
                  href="#/completed"
                >
                  Completed
                </a>
              </li>
            </ul>
          )
        }
        {this.props.list.length !== 0 &&
          (<button className="clear-completed" onClick={this.props.onClearCompletedTodo}>Clear completed</button>)
        }
      </footer>
    )
  }
}

export default TodoFooter
